import HeaderComponent from '@/components/HeaderComponent/HeaderComponent';
import getAssetsFile from '@/utils/pub-use';
import { Image } from 'antd-mobile';
import { useTranslation } from 'react-i18next';
import { gteService } from '@/api/module/user';
import { useEffect, useState } from 'react';

const ContactInformationComponent = () => {
  const [t] = useTranslation();
  const [data, setData] = useState<
    Awaited<ReturnType<typeof gteService>>['data']
  >({
    service1: '',
    service2: '',
  });
  const reqService = async () => {
    const res = await gteService();
    console.log('res', res);
    if (res.code == 0) {
      setData(res.data);
    }
  };
  const toUrl = (url: string) => {
    window.open(url);
  };
  useEffect(() => {
    reqService();
  }, []);
  return (
    <div className="text-white-1">
      <div
        onClick={() => toUrl(data.service1)}
        className="one bg-bg-1 py-4 px-3 rounded-lg flex items-center"
      >
        <Image
          width={'76px'}
          src={getAssetsFile('home/contactInformation-1.png')}
        />
        <div className="ml-4">
          <div>{t('generalQuery')}</div>
          <div className="text-font-9">{data.service1}</div>
        </div>
      </div>
      <div
        onClick={() => toUrl(data.service2)}
        className="two bg-bg-1 py-4 px-3 rounded-lg mt-4 flex items-center"
      >
        <Image
          width={'76px'}
          src={getAssetsFile('home/contactInformation-2.png')}
        />
        <div className="ml-4">
          <div>{t('technicalAvice')}</div>
          <div className="text-font-9">{data.service1}</div>
        </div>
      </div>
    </div>
  );
};
export default function CustomerService() {
  return (
    <div className="text-white-1  px-4">
      <HeaderComponent title="customerService" />
      <ContactInformationComponent />
    </div>
  );
}
